<template>
  <!--系统管理--机构管理-->
  <div class="content-area">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="search-area">
      <div class="search-content">
        <div class="search-item">
          <span>机构类型:</span>
          <el-select clearable v-model="searchData.type" placeholder="请选择">
            <el-option v-for="item in searchData.typeArr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search-item">
          <unit-data @transferSelect="transferSelect" @setStatus="setInputChange" :childName="unitDataName"
                     @setInputEmpty="setInputEmpty"></unit-data>
        </div>
      </div>
      <div class="search-footer">
        <button class="search-btn" @click="orgMgr">查询</button>
      </div>
    </div>
    <!--内容-->
    <div class="main-content">
      <div class="content-info">
        <!-- 111:表格数据与翻页合并模块 -->
        <DataTable :childLoad="parentLoad" :dataTableObj="dataTableObj" v-on:getPageNo="searchByPageNo" v-on:handlePageReload="pageReload"
                   v-on:getPageSize="searchByPageSize">
          <!--除查询外的操作-->
          <div slot="operate">
            <div class="some-operate">
              <button class="some-btn some-btn-add" v-if="pagePower['007001001']"
                      @click="$goRoute('/manage/systemMgr/organMgr/addOrgan')">
                添加机构
              </button>
            </div>
          </div>
          <!-- 额外的操作以及其他因素 -->
          <div>

            <el-table-column fixed="right" align="center" label="是否启用" width="80" v-if="pagePower['007001004']">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.isStart"
                  @change="changeStartOrEnd(scope.row)"
                  active-color="#67c23a"
                  inactive-color="#ACBCC9">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="状态" width="80" v-else>
              <template slot-scope="scope">
                <p>{{scope.row.isStart?'已启用':'未启用'}}</p>
              </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="成员数量" width="70">
              <template slot-scope="scope">
                <el-button type="text" @click="goUserManage(scope.row.id)">{{scope.row.userCounts}}</el-button>
              </template>
            </el-table-column>


            <el-table-column fixed="right" align="center" label="操作" width="120">
              <template slot-scope="scope">
                <div class="item-route" v-show="scope.row.isStart">
                  <div class="item-route-link">
                    <div v-if="pagePower['007001002']">
                      <div
                        @click="$goRoute('/manage/systemMgr/organMgr/addOrgan?activeId='+ scope.row.id)"

                        v-if="scope.row.checkActivite">激活
                      </div>
                      <div
                        @click="$goRoute('/manage/systemMgr/organMgr/addOrgan?organId='+ scope.row.id)"
                        v-else>修改
                      </div>
                    </div>
                    <div
                      v-if="pagePower['007001003']"
                      @click="$goRoute('/manage/systemMgr/organMgr/addOrgan/lookPermission?organId='+ scope.row.id)">
                      权限设置
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
          </div>
        </DataTable>
      </div>
    </div>
  </div>
</template>
<script>
  // 分页
  import DataTable from "../../../components/dataTable/dataTable"
  import com from '../../../js/common'

  import HeadTop from "../../../components/head-top/head-top"
  import {getOrganTypeList, getOrganList} from '@/api/getData'

  import unitData from "../../../components/unitData/unitData"

  export default {
    name: 'organEleManage',
    components: {
      DataTable,
      HeadTop,
      unitData
    },
    data() {
      return {
        unitDataName: '机构名称',
        pagePower: JSON.parse(com.getStore('pagePowers'))['007001'] ? JSON.parse(com.getStore('pagePowers'))['007001'] : {},
        parentLoad: '加载中...',    // 加载状态
        dataTableObj: {
          tableData: [],
          tableColumns: [
            {
              text: '序号',
              width: '50',
              attributeName: 'index'
            },
            {
              text: '机构名称',
              width: '180',
              attributeName: 'name'
            },
            {
              text: '机构代码',
              width: '120',
              attributeName: 'code'
            },
            {
              text: '机构类型',
              width: '80',
              attributeName: 'typeText'
            },
            {
              text: '机构简称',
              width: '120',
              attributeName: 'shortName'
            },
            {
              text: '责任人',
              width: '80',
              attributeName: 'resName'
            },
            {
              text: '责任人电话',
              width: '100',
              attributeName: 'resPhone'
            }
          ],
          pageObj: { // 翻页数据
            pageSize: 10,   // 每页多少条数据
            pageNum: 0,     // 数据总条数
            pageNo: 1,       // 当前为第几页
            searchStatus: 2,
          },
        },
        searchData: {
          orgName: '',
          type: '',
          typeArr: []
        },
        searchMsg: {
          name: '',
          type: ''
        },
        specialType: false,
        role: Number(com.getStore('role'))
      }
    },
    created() {
      // 机构类型数据获取(xjt)

      this.bodyTypeData()
    },
    methods: {
      goUserManage(id) {
        this.$goRoute(`/manage/systemMgr/organMgr/lookOrganUser?organId=${id}`)
      },
      // 获取最后选择的机构
      transferSelect(item) {
        this.searchData.orgName = item.value
      },
      // 前后信息不同时改为无法查询条件
      setInputChange() {
        this.searchData.orgName = '/'
      },
      // 前后信息不同时置空查询条件
      setInputEmpty() {
        this.searchData.orgName = ''
      },
      // 机构类型数据列表
      bodyTypeData() {

        getOrganTypeList({}).then((data) => {
          let currentData = data.data.data
          currentData.forEach((i, t) => { /* t[索引] i[值] */
            if (i.value !== 99) {
              this.searchData.typeArr.push({
                label: i.key,
                value: i.value
              })
            } else if (i.value === 99 && this.role === 4) {
              this.searchData.typeArr.push({
                label: i.key,
                value: i.value
              })
            } else {

            }

          })

          this.orgMgr()
        }).catch((err) => {
          this.$message.error(err.data.message)
        })
      },
      /* 机构分页查询 */
      orgMgr() {

        this.dataTableObj.pageObj.searchStatus = 2
        this.dataTableObj.tableData = []
        this.searchMsg.name = this.searchData.orgName
        this.searchMsg.type = this.searchData.type
        let self = this
        getOrganList({
          pageNo: self.dataTableObj.pageObj.pageNo,
          pageSize: self.dataTableObj.pageObj.pageSize,
          condition: self.searchMsg

        }).then((data) => {

          self.dataTableObj.pageObj.searchStatus = 1
          // 后台回调数据
          let info = data.data.data;
          let infoArr = info.data;
          if (infoArr.length > 0) {
            const pageSize = self.dataTableObj.pageObj.pageSize
            const pageNo = self.dataTableObj.pageObj.pageNo
            infoArr.forEach(function (i, t) {
              i.index = (t + 1) + (pageNo - 1) * pageSize;
              i.isStart = i.status === '1' ? true : false;
              // 判断是否是用户与已激活
              if (i.activStatus === '0') {
                i.checkActivite = i.type === 0 ? true : false;
              }
              // 便利数据判断当前数据类型
              const typeArr = self.searchData.typeArr.filter((v) => {
                if (i.type === v.value) {
                  return v
                }
              })
              if (typeArr.length) {
                i.typeText = typeArr[0].label
              } else {
                i.typeText = '类型不存在'
              }
            });
          } else {
            self.parentLoad = '暂无数据'    // loading(暂无数据)
          }
          self.dataTableObj.tableData = infoArr
          self.dataTableObj.pageObj.pageNum = info.totalRecord

        }).catch((data) => {
          self.parentLoad = data.data.message    // loading(查询失败)
          self.dataTableObj.pageObj.searchStatus = 0
          this.$message.error(data.data.message)
        })
      },
      searchByPageSize(val) { // 每页有多少条数据
        this.dataTableObj.pageObj.pageSize = val
        this.orgMgr()
      },
      searchByPageNo(val) { // 切换到第几页
        this.dataTableObj.pageObj.pageNo = val
        this.orgMgr()
      },
      // 启用或者禁用
      changeStartOrEnd(val) {
        const bol = val.isStart
        const organId = val.id
        let url, sucMsg, errMsg
        if (bol) {
          url = `${com.basePath}/usercenter-web/department/enable`
          sucMsg = '机构启用成功'
          errMsg = '机构启用失败'
        } else {
          url = `${com.basePath}/usercenter-web/department/disable`
          sucMsg = '机构禁用成功'
          errMsg = '机构禁用失败'
        }
        com.axio.post(url, {
          id: organId
        }).then(val => this.$message.success(sucMsg)).catch(err => {
          val.isStart = !val.isStart
          this.$message.error(err.data.message ? err.data.message : errMsg)
        })
      },

      // 页面刷新
      pageReload(){
        this.bodyTypeData();
      }
    }
  }
</script>
<style lang="scss" type="text/scss">
  @import "../../../style/entry/components/pageCommon";

  .item-route-link {
    > div {
      display: inline-block;
      &:first-child {
        margin: 0 10px 0 0;
      }
    }
  }
  .desc-success {
    color: #67c23a !important
  }
  .active-button {
    width: 50px;
    height: 26px;
    border-radius: 2px;
    background: #e7843b;
    text-align: center;
    padding: 0;
    line-height: 26px;
    font-size: 12px;
  }
</style>
